<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        section {
            margin: 10px;
            padding: 10px;
            outline: 1px solid red;
        }
    </style>
</head>
<body>

<section id="label">
    <h1>今天XX出轨了！！&nbsp;<label class="label label-default">New</label></h1>
    <h2>今天XX出轨了！！&nbsp;<label class="label label-info">New</label></h2>
    <h3>今天XX出轨了！！&nbsp;<label class="label label-success">New</label></h3>
    <h4>今天XX出轨了！！&nbsp;<span class="label label-primary">New</span></h4>
    <h5>今天XX出轨了！！&nbsp;<span class="label label-danger">New</span></h5>
    <h6>今天XX出轨了！！&nbsp;<span class="label label-warning">New</span></h6>
</section>

<section id="badge">

    <a href="#">Inbox&nbsp;<span class="badge">42</span></a>


    <button class="btn btn-default">
        <span>已读&nbsp;</span>
        <span class="badge">3</span>
    </button>

    <button class="btn btn-info">
        <span>未读&nbsp;</span>
        <span class="badge">7</span>
    </button>
</section>

<script src="../../jquery/jquery-3.2.1.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>